<?php if (!defined('THINK_PATH')) exit();?>﻿<style>
</style>
<div style="width:1000px;height:100%;padding:10px;margin:20px auto;">
    <div class="easyui-panel" style="height:400px;" title="按院系统计数据报表">
        <div id="departmet_report" style="height:350px;width:950px;margin-top:10px;">
        </div>
    </div>
</div>
<div style="width:1000px;height:100%;padding:10px;margin:5px auto;">
    <div class="easyui-panel" style="height:400px;" title="按专业统计数据报表">
        <div id="major_report" style="height:350px;width:950px;margin-top:10px;">
        </div>
    </div>
</div>
<script src="/StudentRegistration/Public/Home/js/echarts.js" type="text/javascript">
</script>
<script src="/StudentRegistration/Public/Home/js/report.js" type="text/javascript">
</script>
<script>
    var myec;
    function DrawStdLine(id, data, title, subtitle, iswrap, colorStyle) {
        myChart = echarts.init(document.getElementById(id));
        xdata = [];
        ydata = [];
        legend = [];
        for (i = 0; i < data.length; i++) {
            xdata.push(data[i].name);
            legend.push(data[i].name);
            ydata.push(data[i].value);
        }
        // 定义图表option
        var option = {
            // 标题，每个图表最多仅有一个标题控件，每个标题控件可设主副标题
            title: {
                text: title, // 主标题文本
                subtext: subtitle,
                x: 'center'
                // 副标题文本
            },
            grid: {
                y2: 100
            },
            tooltip: {
                trigger: 'axis' // tooltip触发方式:axis以X轴线触发,item以每一个数据项触发
            },
            legend: { // 图例，每个图表最多仅有一个图例
                orient: 'horizontal', // 布局方式，默认为水平布局，可选为：
                // 'horizontal' ¦ 'vertical'
                x: 'left', // 水平安放位置，默认为全图居中，可选为：
                // 'center' ¦ 'left' ¦ 'right'
                // ¦ {number}（x坐标，单位px）
                y: 'top',
                data: legend,
                padding: 30
            },
            toolbox: { // 工具箱，每个图表最多仅有一个工具箱
                show: true, // 是否显示工具栏
                orient: 'horizontal', // 布局方式，默认为水平布局，可选为：
                // 'horizontal' ¦ 'vertical'
                x: 'right', // 水平安放位置，默认为全图右对齐，可选为：
                // 'center' ¦ 'left' ¦ 'right'
                // ¦ {number}（x坐标，单位px）
                y: 'top', // 垂直安放位置，默认为全图顶端，可选为：
                // 'top' ¦ 'bottom' ¦ 'center'
                // ¦ {number}（y坐标，单位px）
                borderWidth: 0, // 工具箱边框线宽，单位px，默认为0（无边框）
                padding: 30,
                feature: {
                    // 辅助线标志
                    mark: {
                        show: false
                    },
                    dataView: {
                        show: true,
                        readOnly: false
                    }, //数据预览
                    magicType: {
                        show: true,
                        type: ['line', 'bar']
                    },
                    restore: {
                        show: true
                    }, //复原
                    //是否启用拖拽重计算特性，默认关闭(即值为false)
                    calculable: true,
                    saveAsImage: {
                        show: false
                    }
                    // 是否保存图片
                }
            },
            // 直角坐标系中横轴数组，数组中每一项代表一条横轴坐标轴，仅有一条时可省略数值
            // 横轴通常为类目型，但条形图时则横轴为数值型，散点图时则横纵均为数值型
            xAxis: [ // X轴均为category，Y轴均为value
                {
                    // 显示策略，可选为：true（显示） | false（隐藏），默认值为true
                    show: true,
                    // 坐标轴类型，横轴默认为类目型'category'
                    type: 'category',
                    // 类目型坐标轴文本标签数组，指定label内容。 数组项通常为文本，'\n'指定换行
                    data: xdata,
                    textStyle: {
                        fontSize: '7px'
                    },
                    // boundaryGap: false,//数值轴两端的空白策略
                    axisLabel: { // X轴刻度配置
                        show: true,
                        formatter: function(params) {
                            if (iswrap) {
                                return params.split("").join("\n");
                            } else {
                                return params;
                            }
                        },
                        height: 100,
                        interval: 0, // 0：表示全部显示不间隔；auto:表示自动根据刻度个数和宽度自动设置间隔个数
                        rotate: 0, // 标签旋转角度，默认为0，不旋转，正直为逆时针，负值为顺时针，可选为：-90 ~ 90
                        margin: 8
                        // 坐标轴文本标签与坐标轴的间距，默认为8，单位px
                    }
                }
            ],
            // 直角坐标系中纵轴数组，数组中每一项代表一条纵轴坐标轴，仅有一条时可省略数值
            // 纵轴通常为数值型，但条形图时则纵轴为类目型
            yAxis: [{
                // 显示策略，可选为：true（显示） | false（隐藏），默认值为true
                show: true,
                // 坐标轴类型，纵轴默认为数值型'value'
                type: 'value',
                // 分隔区域，默认不显示
                splitArea: {
                    show: true
                }
            }],
            // sereis的数据: 用于设置图表数据之用。series是一个对象嵌套的结构；对象内包含对象
            series: [{
                // 系列名称，如果启用legend，该值将被legend.data索引相关
                name: '报到人数',
                // 图表类型，必要参数！如为空或不支持类型，则该系列数据不被显示。
                type: 'bar',
                // 系列中的数据内容数组，折线图以及柱状图时数组长度等于所使用类目轴文本标签数组axis.data的长度，并且他们间是一一对应的。数组项通常为数值
                data: ydata,
                itemStyle: {
                    normal: {
                        color: function(params) {
                            return colorStyle;
                        }
                    }
                },
                barWidth: 40
            }]
        };
        myChart.setOption(option);
    };
    $(function() {
    $.ajax({
        url: totalNumberReportUrl,
        datatype: 'json',
        type: 'get',
        data:'type=1',
        success: function(data) {
            if(data.length > 0){
                DrawStdLine('departmet_report', data, '', '', false, '#CDC0B0');
            }
        }
    });
    $.ajax({
        url: totalNumberReportUrl,
        datatype: 'json',
        type: 'get',
        data:'type=2',
        success: function(data) {
            if(data.length > 0){
                DrawStdLine('major_report', data, '', '', true, '#C1CDCD');
            }
        }
    });
});
</script>